<!-- 我们验证的时候必须添加form表单域 -->
<form action="">
    <ul>
        <li>邮箱: <input type="email" /></li>
        <li>网址: <input type="url" /></li>
        <li>日期: <input type="date" /></li>
        <li>时间: <input type="time" /></li>
        <li>数量: <input type="number" /></li>
        <li>手机号码: <input type="tel" /></li>
        <li>搜索: <input type="search" /></li>
        <li>颜色: <input type="color" /></li>
        <!-- 当我们点击提交按钮就可以验证表单了 -->
        <li> <input type="submit" value="提交"></li>
    </ul>
</form>

<!-- 
    属性选择器
     /* 只选择 type =text 文本框的input 选取出来 */
    input[type=text] {    color: pink;}
    /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
    div[class^=icon] {    color: red;}
    /* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
    section[class$=data] {    color: blue;}

    属性选择器，按照字面意思，都是根据标签中的属性来选择元素
    属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
    属性选择器也可以选择出来自定义的属性
    **注意：**类选择器、属性选择器、伪类选择器，权重为 10


    E:nth-child(n)（★★★）
匹配到父元素的第n个元素

匹配到父元素的第2个子元素

ul li:nth-child(2){}

匹配到父元素的序号为奇数的子元素

ul li:nth-child(odd){} odd 是关键字 奇数的意思（3个字母 ）

匹配到父元素的序号为偶数的子元素

ul li:nth-child(even){} even（4个字母 ）

匹配到父元素的前3个子元素

ul li:nth-child(-n+3){}

选择器中的 n 是怎么变化的呢？

因为 n是从 0 ，1，2，3… 一直递增

所以 -n+3 就变成了

n=0 时 -0+3=3
n=1时 -1+3=2
n=2时 -2+3=1
n=3时 -3+3=0
…
一些常用的公式： 公式不是死的，在这里列举出来让大家能够找寻到这个模式，能够理解代码，这样才能写出满足自己功能需求的代码



n+5  从第5个开始
-n+5  前五个



结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式
如果是无序列表，我们肯定用 nth-child 更多
类选择器、属性选择器、伪类选择器，权重为 10

 -->
